import Vue from 'vue'
import VueRouter from 'vue-router'
import store from "element-ui/packages/cascader-panel/src/store";


Vue.use(VueRouter)

//存储路由映射的数组
const routes = [ //一些静态的路由
    {
        path: '/login',
        name: 'Login',
        component: () => import('../views/Login.vue'),
        meta:{
            title:"登录"
        },
    },
    {
        path: '/register',
        name: 'Register',
        component: () => import('../views/Register.vue'),
        meta:{
            title:"注册"
        },
    },
    {
        path: '/404',
        name: '404',
        component: () => import('../views/404.vue'),
        meta:{
            title:"404"
        },
    },
    {
        path: '/front',
        name: 'Front',
        component: () => import('../views/front/Front.vue'),
        meta:{
            title:"front"
        },
        children:[  //子路由对应子界面，父页面中要有<router-view/>标签才能显示子页面
            {
                path: 'home',
                name: 'FrontHome',
                component: () => import('../views/front/Home.vue'),
                meta:{
                    title:"Home"
                },
            },
            {
                path: 'item1',
                name: 'Item1',
                component: () => import('../views/front/Item1.vue'),
                meta:{
                    title:"高德地图"
                },
            },
            {
                path: 'item2',
                name: 'Item2',
                component: () => import('../views/front/Item2.vue'),
                meta:{
                    title:"定位"
                },
            },
            {
                path: 'item3',
                name: 'Item3',
                component: () => import('../views/front/Item3.vue'),
                meta:{
                    title:"视频模块"
                },
            },
            {
                path: 'detail',
                name: 'detail',
                component: () => import('../views/front/vedioDetail.vue'),
                meta:{
                    title:"视频模块"
                },
            },
            {
                path: 'article',
                name: 'article',
                component: () => import('../views/front/Article.vue'),
                meta:{
                    title:"文章"
                },
            },
            {
                path: 'articleDetail',
                name: 'articleDetail',
                component: () => import('../views/front/ArticleDetail.vue'),
                meta:{
                    title:"文章"
                },
            }
        ]
    }
]

//根据路由映射 创建路由对象
const router = new VueRouter({
    mode: 'history',//rul不包含#
    base: process.env.BASE_URL,//http://localhost:8080/
    routes
})

//设置动态路由 登录时会调用
export const setRoutes=()=>{
    console.log("调用setRoutes")
    //获取用户路由 即菜单
    const storeMenus=localStorage.getItem("menus");
    if(storeMenus){
        //避免重复设置  登录时设置 刷新页面时再次设置
        const currentRouteNames=router.getRoutes().map(v=>v.name)
        if(!currentRouteNames.includes('Manage')){
            //拼装动态路由
            const manageRoute={
                path: '/',
                name: 'Manage',//整体框架 里面有一些子模块 包含 header aside侧边菜单 和 主体内容<router-view />
                component: () => import('../views/Manage.vue'),

                redirect: "/home",
                children: [ //子路由 子路由对应的页面会显示在Manage页面中的 <router-view /> 中
                    {
                        path: '/person',
                        name: '个人信息',
                        component: () => import('../views/Person.vue'),
                        meta:{
                            title:"证书管理系统"
                        },
                    },
                    {
                        path: '/modifyPass',
                        name: '修改密码',
                        component: () => import('../views/ModifyPass.vue'),
                        meta:{
                            title:"证书管理系统"
                        },
                    },
                ]
            }
            const menus=JSON.parse(storeMenus) //获取菜单数组 根据其中的内容设置manage有哪些子路由
            menus.forEach(item=>{  //对于 每一个菜单对象
                if(item.path){  // 如果是一级菜单 （path不为空）
                    let itemMenu={
                        //子路由的path是在父路由的path上进行拼接的 父路由为"/",子路由为"/user",需要将前面的"/"去掉
                        path:item.path.replace("/",""),
                        name:item.name,
                        component:()=>import('../views/'+item.pagePath+'.vue'),
                        meta:{
                            title:"证书管理系统"
                        },
                    }
                    //加入到子路由中
                    manageRoute.children.push(itemMenu)
                }else if(item.children.length){  //二级菜单
                    item.children.forEach(item=>{
                        if(item.path){
                            let itemMenu={
                                path:item.path.replace("/",""),
                                name:item.name,
                                component:()=>import('../views/'+item.pagePath+'.vue'),
                                meta:{
                                    title:"证书管理系统"
                                },
                            }
                            manageRoute.children.push(itemMenu)
                        }
                    })
                }
            })
            //动态添加到路由对象中
            router.addRoute(manageRoute)
        }
    }
}
// 刷新页面会导致路由重置 需要重新调用设置路由（刷新页面会重新加载index.js，所以会执行该函数）
setRoutes()
//定义一个函数  重置路由 退出登录时调用
export const resetRouter=()=>{
    router.matcher=new VueRouter({
        mode:'history',
        base: process.env.BASE_URL,
        routes
    }).matcher
}

//路由守卫
router.beforeEach((to, from, next) => {
    localStorage.setItem("currentPathName", to.name)  //设置当前的路由名称
    console.log(localStorage.getItem("currentPathName"))
    if(to.meta.title){
        document.title=to.meta.title
    }

    // 如果用户没有登录，跳转到登录

    const  storeMenus=localStorage.getItem("menus")
    if(to.matched.length===0){// 未找到路由
        if(storeMenus){ //登录过
            next("/404");
        }else{
            // 跳回登录页面
            next("/login")
        }
    }
    next()

})

//导出router对象
export default router
